<template>
  <div>
    <v-panel-top>
      <el-button type="primary" @click="$refs['dialog-form-append'].openDialog({})">添加</el-button>
    </v-panel-top>
    <v-plain-table :native="{stripe:true}" :data="roles" @change="change">
      <template slot="expand" slot-scope="{scope}">
        <el-button type="text" @click="updateRole(scope.row)">编辑</el-button>
        <el-button type="text" @click="authRole(scope.row.id)">授权</el-button>
        <el-button type="text" @click="removeRole(scope.row.id)">删除</el-button>
      </template>
    </v-plain-table>
    <v-dialog
      :currentID="currentID"
      ref="dialog"
    />
    <v-plain-form
      ref="dialog-form-update"
      title="修改"
      confirmText="修改"
      :form="form"
      :rules="rules"
      @confirm="confirmUpdate"
    />
    <v-plain-form
      ref="dialog-form-append"
      title="新增角色"
      confirmText="确定"
      :form="form"
      :rules="rules"
      @confirm="confirmAppend"
    />
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vDialog from './dialog'
  import vPlainForm from '@/components/plain-form'
  import vPanelTop from '@/components/pannel-top'
  import vPlainTable from '@/components/plain-table'

  @Component({
    components: {
      vDialog,
      vPlainForm,
      vPanelTop,
      vPlainTable
    }
  })
  export default class Role extends Vue {
    roles: TableData = {
      header: [
        {
          label: '角色',
          key: 'name'
        },
        {
          label: '角色类型',
          key: 'roleType',
          formatter: row => this.$utils.toTypeFormat(row.roleType,this.$dict.roleTypes)
        },
        {
          label: '创建时间',
          key: 'createTime',
          formatter: row => this.$utils.toTimeFormat(row.createTime)
        },
        {
          label: '修改时间',
          key: 'updateTime',
          formatter: row => this.$utils.toTimeFormat(row.updateTime)
        }
      ],
      body: [],
      footer: {
        currentPage: 1,
        total: 0
      }
    }
    currentID: string = ''
    form = {
      name: {
        value: '',
        label: '角色名称',
        placeholder: '请输入角色名称',
        type: 'input'
      },

      roleType: {
        value: '',
        label: '角色类型',
        placeholder: '请选择角色类型',
        type: 'select',
        options: this.$dict.roleTypes.filter(v => v.value !== 0)
      }
    }
    rules = {
      'name.value': [
        {required: true, message: '请输入角色名称', trigger: 'change'}
      ]
    }

    /**
     * 角色 分页
     */
    async getRoles () {
      let res: AjaxResponse = await this.$axios.post('b/boms/role/roles', {
        currentPage: this.roles.footer.currentPage,
        pageSize: 10
      })
      if (res.responseCode === 200) {
        this.roles.body = res.data.items
        this.roles.footer.total = res.data.totalNum
        this.roles.footer.currentPage = res.data.currentPage
      }
    }

    change (page) {
      this.roles.footer.currentPage = page
      this.getRoles()
    }

    /**
     * 授权弹窗
     * @param currentID
     */
    authRole (currentID) {
      this.currentID = currentID
      this.$refs.dialog.showDialog()
    }

    /**
     * 删除角色
     * @param id
     */
    async removeRole (id) {
      try {
        await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res: AjaxResponse = await this.$axios.delete(`b/boms/role/delete/${id}`)
        this.getRoles()
        this.$utils.tips(res)
      } catch (e) {

      }
    }

    /**
     * 修改角色弹窗
     * @param data
     */
    async updateRole (data) {
      this.$refs['dialog-form-update'].openDialog({
        id: data.id,
        name: data.name,
        roleType:data.roleType
      })
    }

    /**
     * 确认修改
     * @param form
     */
    async confirmUpdate (form) {
      let res: AjaxResponse = await this.$axios.put('b/boms/role/update', form)
      this.$utils.tips(res)
      this.getRoles()
    }

    /**
     * 确认添加
     * @param name
     */
    async confirmAppend (form) {
      let res: AjaxResponse = await this.$axios.post('b/boms/role/add', form)
      this.$utils.tips(res)
      this.getRoles()
    }

    mounted () {
      this.getRoles()
    }
  }
</script>

<style lang="less" scoped>
  .operation {
    float: right;
  }
</style>
